<template>
  <!-- 日统计 -->
  <view class="Dailystatistics">
    <view class="contentupper">
      <view>
        <Calendar></Calendar>
      </view>
      <view class="progress-container">
        <view class="chart-wrapper">
          <canvas id="myChart" canvas-id="myChart" class="progress-canvas"></canvas>
        </view>
      </view>

      <!-- 出勤人数 -->
      <view class="stats-container">
        <view class="stat-item">
          <text class="stat-number">62</text>
          <text class="stat-label">外勤</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">15</text>
          <text class="stat-label">迟到</text>
        </view>
        <view class="stat-item">
          <text class="stat-number">208</text>
          <text class="stat-label">未打卡</text>
        </view>
      </view>

      <!-- 出勤状态 -->
      <view class="status-grid">
        <view class="status-tag highlight">
          <text class="status-text">未排班</text>
          <text class="status-count">(1)</text>
        </view>
        <view class="status-tag" v-for="i in 4" :key="i">
          <text class="status-text">出差</text>
          <text class="status-count">(39)</text>
        </view>
      </view>

      <!-- 出勤率 -->
      <view class="attendance-table">
        <!-- 表头 -->
        <view class="attendance-header">
          <view class="header-item department">部门出勤率</view>
          <view class="header-item">出勤人数</view>
          <view class="header-item">平均工时</view>
        </view>

        <!-- 数据行 -->
        <view class="attendance-row" style="height: 100rpx;">
          <view class="row-item row-itemtopView">
            <view style="width: 166rpx;">
              <span class="row-itemtopSpan">01</span> 江苏绿港现代农业发展股份有限公司
            </view>
            <view class="row-itemtopprogress">
              <progress style="border-radius: 10rpx;" :percent="30" activeColor="#10AEFF" stroke-width="6" />
            </view>
          </view>
          <view class="row-item row-itemleft">335/543</view>
          <view class="row-item row-itemright">0.5小时</view>
        </view>
      </view>

      <view class="attendancerate-footer">
        统计截至 2025-02-08 17:08
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from './components/calendar.vue'
export default {
  name: "Dailystatistics",
  components: { Calendar },
  data () {
    return {}
  },
}
</script>

<script module="parse" lang="renderjs">
import * as echarts from "echarts";

export default {
  name: "Dailystatistics",
  data () {
    return {
      ren: '335',
      renyin: '543',
    };
  },
  onReady () {
    this.getServerData()
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart () {
        const chartDom = document.getElementById('myChart');
        const myChart = echarts.init(chartDom);

        const total = 523;
        const checkedIn = 336;
        const maxAngle = 180;

        const value = (checkedIn / total) * maxAngle; // 计算打卡人数对应的角度长度

        const option = {
          graphic: [
            {
              type: "text",
              left: "center",
              top: "35%",
              style: {
                text: `${checkedIn} / ${total}`,
                font: "bold 20px Arial",
                fill: "#333",
                textAlign: "center"
              }
            },
            {
              type: "text",
              left: "center",
              top: "48%",
              style: {
                text: "打卡人数 / 应到人数",
                font: "10px Arial",
                fill: "#666",
                textAlign: "center"
              }
            }
          ],
          angleAxis: {
            startAngle: 180,
            max: 360,
            clockwise: true,
            show: false
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: { show: false },
            axisLine: { show: false },
            axisTick: { show: false }
          },
          polar: {
            center: ['50%', '50%'],
            radius: '160%'
          },
          series: [
            {
              type: 'bar',
              z: 2,
              data: [value],
              showBackground: true,
              backgroundStyle: { color: 'transparent' },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 13,
              barGap: '-100%',
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: '#3d86f5' },
                    { offset: 1, color: '#3d86f5' }
                  ]),
                  // shadowBlur: 10,
                  shadowColor: '#3d86f5'
                }
              }
            },
            {
              type: 'bar',
              z: 1,
              data: [maxAngle], // 背景环是半圆最大值
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 13,
              barGap: '-100%',
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#e6e6e6'
                }
              }
            }
          ],
        };

        myChart.setOption(option);
      }
  }
}
</script>

<style lang="scss" scoped>
.Dailystatistics {
  width: 100%;
  height: 100%;
  margin: 20rpx 0 0 0;

  .contentupper {
    position: relative;
    text-align: center;
    height: 100%;

    .progress-container {
      margin: 0 auto 60rpx;
      width: 400rpx;

      .chart-wrapper {
        width: 400rpx;
        height: 250rpx; 

        .progress-canvas {
          width: 400rpx !important;
          height: 450rpx !important;
        }
      }
    }

    .stats-container {
      display: flex;
      justify-content: space-around;
      padding: 16rpx 0;
      margin: 24rpx 0;

      .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8rpx 0;
      }

      .stat-number {
        font-size: 50rpx;
        color: #333;
        margin-bottom: 4rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #666;
      }
    }

    .status-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;
      margin: 0 36rpx;
    }

    .status-tag {
      background: #e5e5e5;
      border-radius: 10rpx;
      padding: 10rpx 24rpx;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
    }

    .status-text {
      font-size: 26rpx;
      margin-right: 8rpx;
    }

    .status-count {
      font-size: 24rpx;
    }

    .attendance-table {
      border-radius: 8rpx;
      margin: 24rpx 0;
    }

    .attendance-header,
    .attendance-row {
      display: flex;
      align-items: center;
      padding: 24rpx;

      .header-item,
      .row-item {
        flex: 1;
        font-size: 24rpx;
        color: #606266;

        &.department {
          flex: 2;
          text-align: left;
          padding-left: 16rpx;
        }
      }
    }

    .attendance-header .header-item {
      font-weight: 600;
      color: #909399;
    }

    .attendance-row:not(:last-child) {
      border-bottom: 2rpx solid #ebeef5;
    }

    .row-item {
      color: #303133;

      &:nth-child(2) {
        text-align: center;
      }

      &:last-child {
        text-align: right;
        padding-right: 16rpx;
      }
    }

    .department {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .attendancerate-footer {
      text-align: left;
      font-size: 24rpx;
      color: #909193;
      height: 36rpx;
      margin-top: 20rpx;
      margin-left: 20rpx;
    }
  }
}

.row-itemtopView {
  display: flex;
  width: 324rpx;
}

.row-itemtopSpan {
  font-size: 32rpx;
  color: #10AEFF;
}

.row-itemtopprogress {
  width: 146rpx;
  position: relative;
  top: 41rpx;
  left: 10rpx;
}

.contentbelow {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
  margin-top: 20rpx;

  .more {
    padding: 0 20rpx 20rpx 0;
  }
}
.row-itemleft{
  margin-left: 20rpx;
}

.row-itemright{
  margin-right: 25rpx;
}
</style>

<style scoped>
/deep/ .row-itemtopprogress .uni-progress-inner-bar {
  border-radius: 10rpx;
}
</style>
